import { useState } from 'react'
import { getNewsListApi } from '../../api/news'
import { List, InfiniteScroll } from 'antd-mobile'
import { useNavigate } from 'react-router-dom'

function NewsList() {
  // 页码值
  const [page, setPage] = useState(1)
  const [list, setList] = useState([])
  const [hasMore, setHasMore] = useState(true)
  const nav = useNavigate()

  // 当列表触底的时候，会自动调用这个函数，加载下一页数据
  async function loadMore() {
    // 页码值自增
    setPage(page + 1)
    // 请求下一页
    const { data: newList } = await getNewsListApi(page)
    // 如果新的一页，请求到的数据length是0，证明列表加载完毕了
    // 一定记得把 hasMore 设置为 false，防止死循环
    if (newList.length === 0) {
      setHasMore(false)
    }
    // 新的一页数据拿到之后，要拼接到旧数据的尾部，而不是直接替换。
    setList([...list, ...newList])
  }

  return (
    <div>
      {/* 列表数据 */}
      <List>
        {list.map((item, index) => (
          <List.Item
            key={index}
            onClick={() => nav('/list/' + item.index)}
          >
            <div style={{ display: 'flex' }}>
              <div>
                <img
                  src={item.imgSrc}
                  alt=""
                  style={{ width: 80, height: 80 }}
                />
              </div>
              <div>
                <h5>{item.title}</h5>
                <p>{item.from}</p>
              </div>
            </div>
          </List.Item>
        ))}
      </List>
      {/* 无限滚动 */}
      <InfiniteScroll
        loadMore={loadMore}
        hasMore={hasMore}
      />
    </div>
  )
}

export default NewsList
